<template>
  <el-descriptions
    title="车检报告"
    direction="vertical"
    border
    style="margin-top: 20px"
  >
    <el-descriptions-item
      :rowspan="2"
      :width="140"
      label="图片"
      align="center"
    >
      <el-image
        style="width: 100px; height: 100px"
        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.KtM5CNJIJh4GTBv7SYEIXwHaE8?w=260&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
      />
    </el-descriptions-item>
    <el-descriptions-item label="车牌号码">冀F88888</el-descriptions-item>
    <el-descriptions-item label="流程状态">正在检修</el-descriptions-item>
    <el-descriptions-item label="监测流程内容">车架</el-descriptions-item>
    <el-descriptions-item label="监测结果概述">轻微磕碰</el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-tag size="small">林俊杰</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="地址">
      保定
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import { computed, ref } from 'vue'

const size = ref('default')

const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
</style>